<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 头部 -->
    <header class="header">
        <!-- navbar -->
        <nav class="navbar">
            <div class="left">
                <a href="#">
                    <i class="iconfont Navbar_logo"></i>
                </a>
            </div>
            <div class="right">
                <a href="#" class="iconfont ic_search_tab"></a>
                <a href="#" class="login">
                    <!-- 登录 -->
                    <img class="txiang" src="./assets/txiang.webp" alt="">
                </a>
                <a href="#" class="download">
                    <div class="App">下载 App</div>
                </a>
            </div>
        </nav>
        <!-- 菜单 menu -->
        <div class="menu">
            <div class="tab">
                <ul>
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">动画</a></li>
                    <li><a href="#">番剧</a></li>
                    <li><a href="#">国创</a></li>
                    <li><a href="#">音乐</a></li>
                    <li><a href="#">舞蹈</a></li>
                </ul>
            </div>
            <a href="#" class="more">
                <i class="iconfont general_pulldown_s"></i>
            </a>
        </div>
    </header>

    <!-- 内容 -->
    <section class="main">
        <div class="video-list">
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./assets/hmcxy.webp" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>999.9</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>999.9</span>万
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">鸿蒙项目全网首发，守护助手APP项目实战教程，HarmonyOS Next 星河版原生APP应用开发功能全覆盖</p>
            </a>
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./assets/sanheiyi.webp" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>105.5</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2844</span>
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">三权合一！特朗普成为美国40年以来权力最大的总统！将势不可挡</p>
            </a>
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./assets/wans.webp" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>105.5</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2844</span>
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">怎样的成就才能配得上这一路的颠沛流离</p>
            </a>
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./assets/f7518203c0c5167026c0a218b9bbc7d5bc0d5ed2.jpg@960w_540h_1c.webp" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>105.5</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2844</span>
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">败选后再胜选，这复仇的滋味多美妙谁能比他更懂？</p>
            </a>
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./assets/fb19473cbd545da963ef9d58f1e85babf9d4a9e4.jpg@960w_540h_1c.webp" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>105.5</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2844</span>
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">谁是最大赢家, 谁将被清算, 特朗普和哈里斯背后的大金主</p>
            </a>
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./assets/ck567.webp" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>105.5</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2844</span>
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">《伍六七之记忆碎片》 第7集 重逢【10月国创】</p>
            </a>
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./assets/mgrkkkk.webp" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>105.5</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2844</span>
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">当美国人看了三折叠后, 直呼华为nb ! ! !</p>
            </a>
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./assets/tlp.webp" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>105.5</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2844</span>
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">美利坚, 你们的皇帝回来了</p>
            </a>
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./assets/hmcxy2.webp" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>105.5</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2844</span>
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程</p>
            </a>
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./assets/pkq.webp" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>105.5</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2844</span>
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">全世界都在逼你长大, 而我想让你做个孩子。</p>
            </a>
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./assets/hehehe.webp" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>105.5</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2844</span>
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">我这就是甲方要的五彩斑斓的黑</p>
            </a>
            <a href="#" class="video-item">
                <div class="card">
                    <img src="./assets/xiaotuxian.webp" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>105.5</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2844</span>
                        </p>
                    </div>
                </div>
                <p class="title ellipsis-2">前端Vue3小兔鲜电商项目实战，vue3全家桶从入门到实战电商项目一套通关</p>
            </a>
        </div>
    </section>

    <!-- 打开App按钮 -->
    <div class="btn">
        <a href="#">
            <i class="iconfont Navbar_logo"></i>
            <span>打开App，看你感兴趣的视频</span>
        </a>
    </div>
    <div class="bottom">
        去bilibili App看更多
    </div>
    <div class="buttom">
        <p class="btext">信息网络传播视听许可证: 0910417</p>
        <p class="btext">网络文化经营许可证 沪网文【2019】3804-274号</p>
        <p class="btext">广播电视节目制作经营许可证：（沪）字第01248号</p>
        <p class="btext">增值电信业务经营许可证 沪B2-20100043</p>
    </div>

</body>

</html>